<template>
  <div class="app-container">
    <div
      v-if="tabsNum=='0'"
    >
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="集群信息配置"
          name="0"
        >
          <clusterwh />
        </el-tab-pane>
        <el-tab-pane
          label="参数详情"
          name="1"
        >
          <ConfigInfo />
        </el-tab-pane>
        
        <el-tab-pane
          label="告警详情"
          name="2"
        >
          <alarm />
        </el-tab-pane>
      </el-tabs>

    </div>
    <deff
      v-if="tabsNum=='1'"
      :check="multipleSelection"
      @center="center"
    />
    <lineDetails
      v-if="tabsNum=='2'"
      :table-data="tableData"
      @center="center"
    />
    <keyPara
      v-if="tabsNum=='3'"
      :table-data="lineData"
      @keyParameter="keyParameter"
    />
    <capacity-parameter-settings
      v-if="tabsNum=='4'"
      @center="center"
    />
  </div>
</template>

<script>
import deff from './deffer.vue'
import lineDetails from './lineDetails.vue'
import alarm from './alarmInfo/alarm.vue'
import keyPara from './keyParameter.vue'
import parameter from '@/api/phaseTwo/parameter.js'
import clusterwh from './clusterwh/index.vue'
import ConfigInfo from './paramInfo/configInfo.vue'

export default {
  components: {deff, lineDetails, keyPara, alarm, clusterwh, ConfigInfo},
  data() {
    return {
      paramsForm: {
        current: 1,
        size: 10,
        cmName: '',
        clusterFlag: ''
      },
      total: 0,
      data: [],
      isLoading: false,
      permission: {
        add: ['add'],
        edit: ['edit'],
        del: ['del']
      },
      multipleSelection: [],
      takeTime: '1天',
      timeList: ['1天', '3天', '7天'],
      lineFlag: false,
      baseLine: {
        name: '',
        logo: '',
        value1: ''
      },
      detailsFlag: false,
      keyFlag: false,
      errorList: [],
      tabsNum: '0',
      tableData: {},
      timeFlag: false,
      collectList: ['一天', '三天', '七天'],
      collectTime: '',
      defaultKey: '80',
      checkList: ['集群A'],
      children: ['子集群A'],
      alarmData: [],
      alarmFlag: false,
      custom: false,
      activeName: '0',
      lineData: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(resetPage = true) {
      if (resetPage) {
        this.paramsForm.current = 1
      }
      this.isLoading = true
      parameter.getParamWarn(this.paramsForm).then(res => {
        this.data = res.content
        this.total = res.totalElements
      }).finally(() => {
        this.isLoading = false
      })
    },
    handleSizeChange(val) {
      this.paramsForm.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.paramsForm.current = val
      this.getData(false)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClose() {
      this.lineFlag = false
    },
    addLine(row) {
      this.baseLine.name = row.cluster
      this.lineFlag = true
    },
    detailsClose() {
      this.detailsFlag = false
    },
    details(row) {
      this.tableData = row
      // this.detailsFlag=true
      this.tabsNum = '2'
    },
    keyClose() {
      this.keyFlag = false
    },
    thanPar() {
      this.tabsNum = '1'
    },
    center(val) {
      this.tabsNum = val
      this.multipleSelection = []
    },
    timeClose() {
      this.timeFlag = false
      this.custom = false
    },
    alarmClose() {
      this.alarmFlag = false
      this.crud.refresh()
    },
    keyParameter(val) {
      this.tabsNum = val
    },
    handleClick() {

    },
    viewAlarm(row) {
      this.lineData = row
      this.alarmFlag = true
    },
    viewIndex(row) {
      this.tabsNum = '3'
      this.lineData = row
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
